let start;  //起始的条数
let time;   //当前的时间 毫秒
let keyword;   //当前类型选择

//定义全局变量
let oUls;
let flag = true;

//获取动态加载到该标签内部的标签对象
const oBox = document.querySelector('.box')

//通过点击按钮动态加载需要展示的ul界面
oBox.innerHTML = '<ul></ul><ul></ul><ul></ul><ul></ul>'
//获取动态加入的标签box中ul标签对象用于动态加载显示数据
oUls = oBox.querySelectorAll('ul');

setPage();

//定义async 异步请求函数程序
async function setPage() {
    const t = new Date();
    time = t.getTime();

    const response = JSON.parse(await myPromiseAjax('/dt', 'get', `include_fields=top_comments%2Cis_root%2Csource_link%2Citem%2Cbuyable%2Croot_id%2Cstatus%2Clike_count%2Csender%2Calbum%2Creply_count&filter_id=美食菜谱&start=${start}&_=${time}`));

    console.log(response);

    //将下一次请求赋值起始数据索引下标
    start = response.data.next_start;
    //获取每一条数据的数组
    const arr = response.data.object_list;

    arr.forEach(item => {
        let str = `
        <li>
            <div class="imgBox" style="height:${260 * item.photo.height / item.photo.width}px">
                <img src="${item.photo.path}"  alt="">
            </div>

            <div class="contentBox">
                <p>${item.msg}</p>
                <p>
                    <span style="${item.like_count === 0 ? 'display:none':''}">
                        <i>点赞</i>${item.like_count}
                    </span>
                    <span style="${item.favorite_count === 0 ? 'display:none' : ''}">
                        <i>收藏</i>${item.favorite_count}
                    </span>
                </p>
                <p>
                    <span>
                        <img src="${item.sender.avatar}" alt="">
                    </span>
                    <span>
                        ${item.sender.username}<br>
                        发布到 <a href="JavaScript:;">
                            ${item.album.name}
                        </a>
                    </span>
                </p>
            </div>
        </li>`

        //每生成一个li 就要拼接入最矮的ul标签中
        //默认是第一ul
        //获取最矮的ul标签
        let minUl = oUls[0];
        
        for(let i = 0 + 1; i <= oUls.length-1; i++) {
            // 如果 minUl 变量中 存储的 ul标签 高度 大于 oUls[i]循环遍历的ul标签的占位 
            // 变量minUl 中 存储 oUls[i] 循环遍历的ul标签 
            if(minUl.offsetHeight > oUls[i].offsetHeight){
                minUl = oUls[i];
            }
        }
        // 循环结束minUl 中  存储的是 最矮的ul标签对象
        // 向 最矮的ul标签中 拼接写入 li标签
        minUl.innerHTML += str;
    })
    // 当请求执行结束 当新的页面内容生成完毕 
    // 可以再次发起新的请求 给 变量赋值原始数据
    flag = true;
}


// 定义页面滚动监听事件
window.addEventListener('scroll',function(){
    //获取数值
    //获取页面上卷高度
    let scrollTop = document.documentElement.scrollTop;
    //获取视窗窗口占位高度
    let winHeight = document.documentElement.clientHeight;
    //设定预留高度
    let height = 500;

    let minUl = oUls[0];

    for(let i = 0 + 1; i <= oUls.length-1;i++){
        // 如果 minUl 变量中 存储的 ul标签 高度 大于 oUls[i]循环遍历的ul标签的占位 
        // 变量minUl 中 存储 oUls[i] 循环遍历的ul标签
        if(minUl.offsetHeight > oUls[i].offsetHeight){
            minUl = oUls[i];
        }
    }

    if(scrollTop + winHeight + height > minUl.offsetHeight){
        /*
            因为 scroll事件 鼠标滚动一次 多次触发 scroll事件
            也就是 鼠标滚动一次 多次触发执行 setPage() 函数 
            也就是 鼠标滚动一次 多次触发执行 新的 ajax请求 

            因为 ajax请求是异步程序 结果就是 多次触发的ajax请求 执行的是相同的请求参数
            获取的 响应体结果 是 相同的响应体结果
        
            实际项目中 多次请求 只需要执行 第一次请求
        */

        // 判断变量储存的数据 防止多次调用函数
        if(flag){
            flag = false;
        }else{
            return;
        }
        // 再次调用函数 发起新的请求 动态渲染生成新的页面
        setPage();
    }
})